<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>全部动态</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-hairline--top-bottom::after,
        .van-hairline-unset--top-bottom::after {
            border: 0;
        }

        .van-tab {
            padding: 0 0.08rem;
        }

        .flex-x-s {
            position: relative;
        }
        .app{
            margin-bottom: 1rem;
        }
        .bp-x{
            display: none !important;
        }

        .bp_container{
            background: black !important;
            opacity: 100% !important;
        }

        .dynamic .dynamic-f3 .videoStyle{
            width: 1rem;
            height: 1rem;
        }
        .dynamic .dynamic-f3 .doubleImg{
            width: 2rem;
            height: 2rem;
        }

        .video_box{
            position: relative;
            margin-right: .1rem;
            margin-bottom: .1rem;
        }

        .video_box .playIcon {
            color: #3F8CEC;
            font-size: .5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .video_box .playIcon>img {
            width: .5rem;
            height: .5rem;
        }

    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="dynamic" v-for="(item, index) in dynamicList" :key="index" @click="goPage(item)">
            <div class="dynamic-f1 flex-x-sb">
                <div class="info avatar flex-x-s">
                    <img :src="item.headImg?item.headImg:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/man-avatar.png'" alt="">
                    <div class="name">
                        <div>{{item.nickName}}</div>
                        <div class="datetime">{{item.publishTime}}</div>
                    </div>
                </div>
                <div class="follow" v-show="item.attentionFlag !== -1" :class="{followed:item.attentionFlag}" @click.stop="doFollow(item)">
                    {{item.attentionFlag ? '已关注' : '关注ta'}}
                </div>
            </div>
            <div class="dynamic-f2">
                {{item.content}}
            </div>
            <div class="dynamic-f3">
                <div v-for="(it,idx) in item.medias" :key="idx" class="flex-x-s">
                    <div class="video_box videoStyle"
                        :class="{doubleImg:item.medias && item.medias.length===1}"
                        v-if="it.mediaType === '0'">
                        <img :src="it.imagePath" alt=""
                            :class="{doubleImg:item.medias && item.medias.length===1}"
                            @click.stop="preview(idx,item.medias)">
                    </div>
                    <div v-if="it.mediaType === '1'"
                        :class="{doubleImg:item.medias && item.medias.length===1}"
                        class="video_box videoStyle" :id="'imagePath'+index"
                        @click.stop="videoPreview(it, index)">
                        <img :src="it.imagePath ? it.imagePath : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/loading2.png'" alt=""
                            :class="{doubleImg:item.medias && item.medias.length===1}">
                        <span v-if="it.imagePath" class="iconfont playIcon">
                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/playV.png" alt="">
                        </span>
                    </div>
                </div>
            </div>
            <div class="dynamic-f4"></div>
            <div class="dynamic-f5 flex-x-s">
                <div class="comment flex-x-s">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/comment.png" alt="">
                    <span>{{item.commentNumber == 0 ? '评论' : item.commentNumber}}</span>
                </div>
                <div class="flex-x-s thumb" @click.stop="doThumb(item)">
                    <img :src="item.likeFlag?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_active.png' : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_no.png'" alt="">
                    <span>{{item.likeNumber == '0' ? '点赞' : item.likeNumber}}</span>
                </div>
            </div>
        </div>
        </van-list>
        </van-pull-refresh>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/BigPicture.js"></script>
    <script>
        apiready = function() {
            var photoBrowser = api.require('photoBrowser');
            var vm = new Vue({
                    el: '.app',
                    data: {
                        queryInfo: {
                            pageSize: 10,
                            pageNum: 1,
                        },
                        dynamicList: [],
                        hasNext: true,
                        viodePreview: null
                    },
                    // created() {
                    //     api.sendEvent({
                    //     name: 'eventTab',
                    //     extra: { key: ' value' }
                    // });
                    // },
                    mounted() {
                        this.initAllNews()
                    },
                    computed: {},
                    methods: {
                        preview(index,medias){
                            previewPhoto(index,medias,photoBrowser)
                        },
                        initAllNews() {
                            var vm = this;
                            circle("initAllNews")(vm.queryInfo, function(ret) {
                                if (vm.queryInfo.pageNum == 1) {
                                    vm.dynamicList = ret.data.list;
                                } else {
                                    vm.dynamicList = vm.dynamicList.concat(ret.data.list);
                                }
                                vm.hasNext = ret.data.hasNext;
                            })
                        },

                        /**
                         * 视频预览
                         * @param item
                         * @param index
                         */
                        videoPreview: function (item, index) {
                            let _this = this
                            if (!item.videoPath){
                                common("getVideoPlay")(item.videoId, function (ret) {
                                    let videoData = ret.data
                                    if (videoData && videoData.playInfoList.length > 0){
                                        let playUrl = videoData.playInfoList[0].playURL
                                        api.openVideo({
                                            url: playUrl
                                        });
                                    }else {
                                        // toastMiddle('视频转码中！')
                                        return false
                                    }
                                })
                            }else {
                                api.openVideo({
                                    url: item.videoPath
                                });
                            }
                        },
                        // 关注取消关注
                        doFollow(item) {
                            var vm = this;
                            circle("doFollow")(item, function(ret) {
                                item.attentionFlag = !item.attentionFlag;
                                // 更新列表关注状态
                                vm.dynamicList.map( it => {
                                    if (item.userId == it.userId ){
                                        it.attentionFlag = item.attentionFlag
                                    }
                                })
                            })
                        },
                        doThumb(item) {
                            var vm = this;
                            circle("doThumb")(item, function(ret) {
                                item.likeFlag = !item.likeFlag;
                                console.log(item.likeFlag)
                                if (item.likeFlag === true) {
                                    item.likeNumber += 1;
                                    toastMiddle('点赞成功')
                                } else {
                                    item.likeNumber -= 1;
                                    toastMiddle('取消点赞')
                                }
                            })
                        },
                        goPage(item) {
                            api.openWin({
                                name: 'circle_detail_win',
                                url: 'circle_detail_win.html',
                                bounces: false,
                                pageParam: {
                                    topicId: item.topicId,
                                    // topicId: item.topicId,
                                    // newsImg: item.imagePath,
                                    // toUserId: item.userId,
                                    // topicCommentId: item.topicCommentId,
                                    topic: item
                                }
                            });
                        }
                    },
                })
                // 下拉刷新
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function(ret, err) {
                vm.queryInfo.queryInfo = 1;
                vm.queryInfo.pageNum = 1;
                vm.initAllNews();
                api.refreshHeaderLoadDone()
            });

            api.addEventListener({
                name: 'refreshAllTopic'
            }, function(ret, err){
                vm.queryInfo.queryInfo = 1;
                vm.queryInfo.pageNum = 1;
                vm.initAllNews();
            });

            api.addEventListener({
                name: 'updateUserAttention'
            }, function(ret, err){
                vm.dynamicList.map( it => {
                    if (it.userId == ret.value.userId ){
                        it.attentionFlag = ret.value.attentionFlag
                    }
                })
            });

            api.addEventListener({
                name: 'updateLikeOrComments'
            }, function(ret, err){
                for (let i = 0; i < vm.dynamicList.length; i++) {
                    if (vm.dynamicList[i].topicId == ret.value.topicId ){
                        vm.dynamicList[i].commentNumber = ret.value.commentNumber
                        vm.dynamicList[i].likeNumber = ret.value.likeNumber
                        vm.dynamicList[i].likeFlag = ret.value.likeFlag
                        break
                    }
                }
            });

            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function(ret, err) {
                if (vm.hasNext) {
                    console.log(vm.queryInfo.pageNum)
                    vm.queryInfo.pageNum++
                        vm.initAllNews();
                }
            });
            api.addEventListener({
                name: 'eventCircleClosePhoto'
            }, function(ret, err){
                if (document.getElementById("bp_container")) {
                    vm.viodePreview.close()
                }
                photoBrowser.close();
            });
        }
    </script>
</body>

</html>
